<template>
  <view class="content">
    <form @submit="formSubmit" @reset="formReset">
      <!-- 表单内容 -->
      <view class="form-item">
        <text class="label">收货人</text>
        <input class="input" placeholder="请填写收货人姓名" v-model="form.receiver" />
      </view>
      <view class="form-item">
        <text class="label">手机号码</text>
        <input class="input" placeholder="请填写收货人手机号码" v-model="form.contact" />
      </view>
      <view class="form-item">
        <text class="label">所在地区</text>
        <picker class="picker" mode="region" value="[]" @change="pickerRegionChange">
          <view v-if="form.fullLocation">{{form.fullLocation}}</view>
          <view v-else class="placeholder">请选择省/市/区(县)</view>
        </picker>
      </view>
      <view class="form-item">
        <text class="label">详细地址</text>
        <input class="input" placeholder="街道、楼牌号等信息" v-model="form.address" />
      </view>
      <view class="form-item">
        <label class="label">设为默认地址</label>
        <switch class="switch" color="#27ba9b" :checked="form.isDefault == 0 ? false : true" @change="switchChange"/>
      </view>
    </form>
  </view>
  <!-- 提交按钮 -->
  <button class="button" @tap="save_btn">保存并使用</button>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { onLoad } from "@dcloudio/uni-app";
//引入请求函数
import { reqAddUserAddress, reqUserAddressDetail, reqUpdateUserAddress } from "@/services/address";
//引入类型约束
import type { addressResponse } from "@/types/address";

const props = defineProps(['id']);

// 表单数据
const form = ref<addressResponse>({
  receiver: '', // 收货人
  contact: '', // 联系方式
  fullLocation: '', // 省市区(前端展示)
  provinceCode: '', // 省份编码(后端参数)
  cityCode: '', // 城市编码(后端参数)
  countyCode: '', // 区/县编码(后端参数)
  address: '', // 详细地址
  isDefault: 0, // 默认地址，1为是，0为否
})

//uni生命周期
onMounted(()=>{
  //获取地址详情,如果有
  getAddressDetail();
})

//获取某个地址详情by id
const getAddressDetail = async () => {
  uni.setNavigationBarTitle({title:"添加收货地址"});
  if(props.id == "") return;
  //修改地址
  uni.setNavigationBarTitle({title:"修改收货地址"})
  let res = await reqUserAddressDetail(props.id);
  form.value.receiver = res.result.receiver;
  form.value.contact = res.result.contact;
  form.value.fullLocation = res.result.fullLocation;
  form.value.provinceCode = res.result.provinceCode;
  form.value.cityCode = res.result.cityCode;
  form.value.countyCode = res.result.countyCode;
  form.value.address = res.result.address;
  form.value.isDefault = res.result.isDefault;
  console.log('获取收获地址详情api',res);
}


//省市区选择器的change事件
const pickerRegionChange = (evn:any) => {
  // console.log(evn.detail.value);  //["北京市", "北京市", "东城区"]
  //地址str
  form.value.fullLocation = evn.detail.value.join('-');
  //请求参数赋值
  form.value.provinceCode = evn.detail.code[0];
  form.value.cityCode = evn.detail.code[1];
  form.value.countyCode = evn.detail.code[2];
}
//switch开关的change事件
const switchChange = (evn:any) => {
  // console.log(evn.detail.value);  //false | true
  evn.detail.value == true ? (form.value.isDefault = 1) : (form.value.isDefault = 0) ;
}

//对表单数据进行简单校验
let msg:string = null;  //表单校验提示信息
const formVerification = () => {
  if(form.value.receiver.trim() == ""){
    return msg = "收货人不能为空!";
  }
  if(form.value.contact == undefined || form.value.contact.length !== 11){
    return msg = "手机号格式错误!";
  }
  if(form.value.fullLocation == ''){
    return msg = "请选择省市区!";
  }
  if(form.value.address.trim() == ''){
    return msg = "请输入详细的地址信息!";
  }
}

//保存并使用按钮
const save_btn = async () => {
  // console.log(form.value);
  formVerification();  //对表单进行简单校验
  if(msg !== null){
    uni.showToast({icon:"none",title:msg});
    msg = null;
    return ;
  }
  //校验完毕，向服务器发请求,此处要判断是添加还是修改
  let paramsObj = {};
  Object.assign(paramsObj,form.value);
  delete(paramsObj.fullLocation);
  if(props.id == ""){
    //添加地址
    let res = await reqAddUserAddress(paramsObj);
    uni.showToast({icon:"success",title:"地址添加成功"});
    console.log('添加用户地址api',res);
  } else {
    //修改地址
    let res = await reqUpdateUserAddress(props.id,paramsObj);
    uni.showToast({icon:"success",title:"地址修改成功"});
    console.log("修改用户地址api",res);
  }
  //将表单数据参数置空
  form.value.receiver = "";
  form.value.contact = "";
  form.value.fullLocation = "";
  form.value.provinceCode = "";
  form.value.cityCode = "";
  form.value.countyCode = "";
  form.value.address = "";
  //进行页面跳转
  setTimeout(() => {
    uni.navigateBack();
  }, 500);
}

</script>

<style lang="scss">
page {
  background-color: #f4f4f4;
}

.content {
  margin: 20rpx 20rpx 0;
  padding: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;

  .form-item,
  .uni-forms-item {
    display: flex;
    align-items: center;
    min-height: 96rpx;
    padding: 25rpx 10rpx 40rpx;
    background-color: #fff;
    font-size: 28rpx;
    border-bottom: 1rpx solid #ddd;
    position: relative;
    margin-bottom: 0;

    // 调整 uni-forms 样式
    .uni-forms-item__content {
      display: flex;
    }

    .uni-forms-item__error {
      margin-left: 200rpx;
    }

    &:last-child {
      border: none;
    }

    .label {
      width: 200rpx;
      color: #333;
    }

    .input {
      flex: 1;
      display: block;
      height: 46rpx;
    }

    .switch {
      position: absolute;
      right: -20rpx;
      transform: scale(0.8);
    }

    .picker {
      flex: 1;
    }

    .placeholder {
      color: #808080;
    }
  }
}

.button {
  height: 80rpx;
  margin: 30rpx 20rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #27ba9b;
}  
</style>